<template>
    <!--  -->
  <div class="showimg-props flex-center" :class="{on: showimg}">
    <!-- @click="closefun" -->
        <div class="showimg-mask" ></div>
        <div class="close-button" @click="closefun"></div>
        <div v-if="list && list.length" class="showimg-main flex-center">
            <div class="swiper-button-prev img-button-prev"></div>
            <div class="swiper img-swiper">
                <div class="swiper-wrapper">
                    <div v-for="(item, index) in list" :key="index" class="swiper-slide">
                        <div class="img-item">
                            <div class="img-pic">
                                <div class="pic-box">
                                    <img class="img" src="@/assets/images/pic.jpg" alt="">
                                </div>
                            </div>
                            <div class="showtxt">
                                标题
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next img-button-next"></div>
        </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "ShowImg",
  props: {
    list: Array,
    slide: [String, Number]
  },
  data() {
    return {
      showimg: false,
      initialSlide: 0,
      swiper_img: null
    };
  },
  mounted(){
    if(this.list && this.list.length){
        this.initswier()
    }
  },
  methods: {
    openfun() {
        this.showimg = true;
    },
    closefun() {
        this.showimg = false;
    },

    initswier() {
        this.swiper_img = new Swiper(".img-swiper", {
            navigation: {
                nextEl: ".img-button-next",
                prevEl: ".img-button-prev",
            },
        });
    }
  }
};
</script>

<style scoped lang="scss">
</style>
